<template>
	<div id="">

		<el-row>
		  <el-button type="primary" @click="openDialogFunc"><i class="el-icon-circle-plus-outline"></i>添加角色</el-button>
		</el-row>
		
		
		<!-- Form -->
		<!-- <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> -->
		<Add v-if="dialogFormVisible" @handleClick="closeDialogFunc"></Add>
		<!-- <List></List> -->
		<Edit v-if="editVisible" @handleClick="closeEdit"></Edit>
		<List @editClick="changeEdit"></List>	
	</div>
</template>

<script>
import Add from './part/Add.vue';
import List from './part/List.vue';
import Edit from './part/Edit.vue';
export default {
	components: {
	  Add,
	  List,
	  Edit
	},	
	data() {
	  return {
		dialogFormVisible: false,
		editVisible: false,
		row_id:''
	  };
	},
	methods:{
		//接收参数。传几个就接几个
		closeDialogFunc(val){
			this.dialogFormVisible = val
		},
		openDialogFunc(){
			this.dialogFormVisible = true
		},
		changeEdit(val){
			this.editVisible = val[0]
			this.row_id = val[1]
		},
		closeEdit(val){
			this.editVisible = false
			// console.log(this.editVisible)
		},

	}
  };
</script>

<style>
	.el-row {
	    margin-bottom: 15px;
	    box-sizing: border-box;
	}
</style>
